<template>
    <div class="assy">
      <div class="assy-inner">
        <div class="assy-item">
            <span :class="{ 'active': isActive1 ,'assy-item-title': isActive}" @click="switchTab('dzhp')">地震滑坡</span>                
        </div>
        <div class="assy-item">
            <span :class="{ 'active': isActive2 ,'assy-item-title': isActive }" @click="switchTab('styh')">砂土液化</span>               
        </div>
        <div class="assy-item">
            <span :class="{ 'active': isActive3 ,'assy-item-title': isActive }" @click="switchTab('rtzx')">软土震陷</span>               
        </div>
      </div>
      
      <!--<div class="assy-panel">-->
      	<div id="myPieChart"></div>
      <!--</div>-->
      <div class="dashed-border"></div>
      <div class="assy-bottom">
      	<div class="assy-bottom-title">地表破裂带</div>
      	<div class="assy-bottom-image">
      		<img src="@/assets/images/dzzh/dbpld_pie.png" alt="" class="ls-left-img">
      	</div>
      	<div class="assy-bottom-area">
      		<el-carousel height="50px" direction="vertical" :autoplay="true" :interval="3000" arrow="never" indicator-position="none">
				    <el-carousel-item v-for="item in dbpldList" :key="item">			     
				      <div class="word_1">{{item.name}}</div>
		      		<div class="word_2">{{item.length}}</div>
		      		<div class="word_3">KM</div>
				    </el-carousel-item>
				  </el-carousel>
      		
      	</div>
      </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getSurfaceRuptureZone, getDisasterOverview1 } from '@/api/geologicalDisaster.js';
import dzhpPie from '@/assets/images/dzzh/dzhp_pie.png';
import styhPie from '@/assets/images/dzzh/styh_pie.png';
import rtzxPie from '@/assets/images/dzzh/rtzx_pie.png';
const props = defineProps({
    typeData: {
        default: {},
        type: Object,
    }
})
const { typeData } = toRefs(props)

const isActive = ref(true);
const isActive1 = ref(false);
const isActive2 = ref(true);
const isActive3 = ref(false);
const dbpldList = ref([]);
const landslide = ref({});
const sand = ref({});
const yesAndNo = ref({});
const imgUrl = ref("");
onMounted(() => {  
	watch(()=>props.typeData,()=>{
		console.log(typeData.value)
	
		if(typeData.value.parentType == 1){
			isActive1.value = true;
			isActive2.value = false;
			isActive3.value = false;
			imgUrl.value = dzhpPie;
			let params = {
				landslideSecondType: typeData.value.childType-1,
				sandSecondType: 1,
			 	weakSecondType: 1,
				
			}
		 	getDisasterOverview1(params).then((res) => {
				console.log(res.data)
				let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
				let data = [
		      { value: res.data.landslide.poleHighProportion, name: '极高危险' },
		      { value: res.data.landslide.highProportion, name: '高危险' },
		      { value: res.data.landslide.centreProportion, name: '中危险' },
		      { value: res.data.landslide.lowProportion, name: '低危险' },
		      { value: res.data.landslide.poleLowProportion, name: '极低危险' }
		    ]
				landslide.value = res.data.landslide;
				sand.value = res.data.sand;
				yesAndNo.value = res.data.yesAndNo;
				nextTick(() => {
					createEcharts(color, data);
				})  
		  });
			
		}else if(typeData.value.parentType == 2){
			isActive1.value = false;
			isActive2.value = true;
			isActive3.value = false;
			imgUrl.value = styhPie;
			let params = {
				landslideSecondType: 2,
				sandSecondType: typeData.value.childType-1,
			 	weakSecondType: 1,
				
			} 
			getDisasterOverview1(params).then((res) => {
				console.log(res.data)
				let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
				let data = [
		      { value: res.data.sand.poleHighProportion, name: '极高危险' },
		      { value: res.data.sand.highProportion, name: '高危险' },
		      { value: res.data.sand.centreProportion, name: '中危险' },
		      { value: res.data.sand.lowProportion, name: '低危险' },
		      { value: res.data.sand.poleLowProportion, name: '极低危险' }
		    ]
				landslide.value = res.data.landslide;
				sand.value = res.data.sand;
				yesAndNo.value = res.data.yesAndNo;
				nextTick(() => {
					createEcharts(color, data);
				})  
		  });
			
		}else if(typeData.value.parentType == 3){
			isActive1.value = false;
			isActive2.value = false;
			isActive3.value = true;
			imgUrl.value = rtzxPie;
			let params = {
				landslideSecondType: 2,
				sandSecondType: 1,
			 	weakSecondType: typeData.value.childType-1,
				
			} 
			getDisasterOverview1(params).then((res) => {
				console.log(res.data)
				let color = [ '#46FFFF','#FFA741'];
				let data = [
		      { value: res.data.yesAndNo.yesProportion, name: '震陷' },
		      { value: res.data.yesAndNo.noProportion, name: '不震陷' },
		     
		    ]
				landslide.value = res.data.landslide;
				sand.value = res.data.sand;
				yesAndNo.value = res.data.yesAndNo;
	//			let color = [ '#46FFFF','#FFA741'];
	//			let data = [
	//	      { value: 1048, name: '震陷' },
	//	      { value: 735, name: '不震陷' },
	//	     
	//	    ]
				
				nextTick(() => {
					createEcharts(color, data);
				})  
		  });
			
		}
		
	
	}, { deep: true, immediate: true })
   
})

onBeforeUnmount(() => {
	let myChart = echarts.init(document.getElementById("myPieChart"));
	myChart.dispose();
})
const getData = () => {
	getSurfaceRuptureZone().then((res) => {
		//console.log(res.data)
    dbpldList.value = res.data;
  });
}

getData();

const switchTab = (val) => {
	
	if(val == "dzhp"){
		isActive1.value = true;
		isActive2.value = false;
		isActive3.value = false;
		imgUrl.value = dzhpPie;
		let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
		let data = [
      { value: landslide.value.poleHighProportion, name: '极高危险' },
      { value: landslide.value.highProportion, name: '高危险' },
      { value: landslide.value.centreProportion, name: '中危险' },
      { value: landslide.value.lowProportion, name: '低危险' },
      { value: landslide.value.poleLowProportion, name: '极低危险' }
    ]
		nextTick(() => {
			createEcharts(color, data);
		})
	}else if(val == "styh"){
		isActive1.value = false;
		isActive2.value = true;
		isActive3.value = false;
		imgUrl.value = styhPie;
		let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
		let data = [
      { value: sand.value.poleHighProportion, name: '极高危险' },
      { value: sand.value.highProportion, name: '高危险' },
      { value: sand.value.centreProportion, name: '中危险' },
      { value: sand.value.lowProportion, name: '低危险' },
      { value: sand.value.poleLowProportion, name: '极低危险' }
    ]
		nextTick(() => {
			createEcharts(color, data);
		})
	}else if(val == "rtzx"){
		isActive1.value = false;
		isActive2.value = false;
		isActive3.value = true;
		imgUrl.value = rtzxPie;
		let color = [ '#46FFFF','#FFA741'];
		let data = [
      { value: yesAndNo.value.yesProportion, name: '震陷' },
      { value: yesAndNo.value.noProportion, name: '不震陷' },
     
    ]
		nextTick(() => {
			createEcharts(color, data);
		})
	}

}
const createEcharts = (color, data) => {
	let myChart = echarts.init(document.getElementById("myPieChart"));
  // 绘制图表
  myChart.setOption({
	  tooltip: {
	    trigger: 'item'
	  },
   	grid: {
	    left: '0%',        // 设置图在左侧留白
	    right: '4%',     // 设置图在右侧留白
	    bottom: '4%', 
	    containLabel: false // 包含坐标轴标签在内
	  },
	  legend: {
	    orient: 'vertical',  // 设置图例垂直排列
	    right: '30px',         // 设置图例在右侧
	    top: 'center',        // 设置图例在垂直方向上居中
	    textStyle: {
        	color: "#fff",
        	padding:[0,4]//文字与图形之间的左右间距
      	},
      	itemWidth: 10,    // 设置图例项的宽度为10像素
		itemHeight: 10    // 设置图例项的高度为10像素
	  },
	  color: color, // 设置饼状图的颜色
	  graphic: {
      elements: [
       {
	      type: 'image',
	      style: {
          image: imgUrl.value,
          width: 90,
          height: 90,
	      },
	      left: '25%',
	      top: 'center'
	            
       }
      ]
    },
	  series: [
	    {
	      name: '砂土液化',
	      type: 'pie',
	      radius: ['50%', '60%'],
	      center: ['35%', '50%'],  // 设置饼状图的中心位置，向右移动一定的距离
	      //avoidLabelOverlap: false,
	      
	      label: {
//		      show: false,
//		      position: 'center'
		   	},
	      emphasis: {
	        label: {
	          
	      	}
	      },
	      labelLine: {
	        show: false
	      },
	      data: data,
	      itemStyle: {
	      	normal: {
	      		borderRadius: 10, // 设置圆角大小
		        borderColor: '#transparent',
		        borderWidth: 2
	      	}
	        
	      },
	      label: {
          show: true,
    			color: '#ffffff', // 设置标签颜色
      	}
	    }
	  ]
	});
  window.onresize = function () { // 自适应大小
    myChart.resize();
  };
}
</script>
<style lang='scss' scoped>

.assy{
    color: #fff;
    .assy-inner{
        display: flex;
        flex-wrap: wrap;
        
        justify-content: center;
        align-items: center;
    }
    #myPieChart{
		  width: 450px;
		  height: 205px;
		  font-size: 14px;
		}
    .dashed-border{
    	width: 430px;
			border: 1px dashed #475ADB;
			margin-left: 10px;
			margin-bottom: 10px;
    }
    &-item{
        width: 80px;
				height: 30px;
        background-size: 100% 100%;
        background-image: url(/src/assets/images/dzzh/bg1.png);
       	margin-top: 10px;
        margin-bottom: 10px;       
        cursor: pointer;
        line-height: 29px;
        &:nth-child(2){
        	margin-left: 20px;
          margin-right: 20px;
        }
        span{
            display: block;
            color: #418DFD;
        }
        .active{        	
					color: #FFFFFF;
					background-size: 100% 100%;
        	background-image: url(/src/assets/images/dzzh/bg2.png);
        }
        &-title{
            color: #46FFFF;
            font-size: 14px;           
        		text-align: center;
        }
    }
    .assy-bottom{
      display: flex;
      height: 60px;
      position: relative;
			&-title{
				width: 80px;
				height: 16px;
				font-size: 16px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				position: absolute;
				left: 15px;
			}
			&-image{
				position: absolute;
				left: 24px;
				top: 24px;
			}
			&-area{
				width: 300px;
				height: 45px;
				background: rgba(0,0,0,0.25);
				position: absolute;
				left: 135px;
				top: 40px;
				.word_1{
					position: absolute;
					top: 12px;
					left: 20px;
					font-size: 16px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #E4F5FF;
				}
				.word_2{
					position: absolute;
					top: 7px;
					left: 180px;
					font-size: 24px;
					font-family: Helvetica Neue LT Pro-65 Medium, Helvetica Neue LT Pro;
					font-weight: normal;
					color: #46FFFF;
				}
				.word_3{
					position: absolute;
					top: 12px;
					right: 10px;
					font-size: 16px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #E4F5FF;
				}
			}
    }
}
</style>